@import '../config';

@mixin b($block) {
  $B: $namespace + '-' + $block !global;

  .#{$B} {
    @content;
  }
}

@mixin when($state) {
  @at-root {
    &.#{$state-prefix + $state} {
      @content;
    }
  }
}

@mixin size($prefix, $state) {
  @at-root {
    .#{$namespace + '-' + $prefix + '-size-' + $state} {
      @content;
    }
  }
}

@mixin m($modifier) {
  $selector: &;
  $currentSelector: '';
  @each $unit in $modifier {
    $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ','};
  }

  @at-root {
    #{$currentSelector} {
      @content;
    }
  }
}

@mixin e($element) {
  $E: $element !global;
  $selector: &;
  $currentSelector: '';
  @each $unit in $element {
    $currentSelector: #{$currentSelector + '.' + $B + $element-separator + $unit + ','};
  }

  @if hitAllSpecialNestRule($selector) {
    @at-root {
      #{$selector} {
        #{$currentSelector} {
          @content;
        }
      }
    }
  } @else {
    @at-root {
      #{$currentSelector} {
        @content;
      }
    }
  }
}

@mixin hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  pointer-events: none;
  visibility: hidden; // prevent tab stops and screen reader discovery
}


@mixin border_1px($type: default, $color: transparent, $radius: 1rem) {
  position: relative;
  &::after {
    content: "";
    box-sizing: border-box;
    border-radius:$radius;
    position: absolute;
    @if $type == default {
      top: 0;
      left: 0;
      width: 200%;
      height: 200%;
      border: 1px solid $color;
    } @else if $type == top {
      top: 0;
      left: 0;
      width: 200%;
      height: 1px;
      background: $color;
    } @else if $type == bottom {
      bottom: 0;
      left: 0;
      width: 200%;
      height: 1px;
      background: $color;
      transform-origin: 0 100%;
    } @else if $type == left {
      top: 0;
      left: 0;
      width: 1px;
      height: 200%;
      background: $color;
    } @else if $type == right {
      top: 0;
      right: 0;
      width: 1px;
      height: 200%;
      background: $color;
    }
    transform: scale(0.5);
    transform-origin: 0 0;
  }
}

@mixin buttonRadius ($radius, $color) {
  border-radius:$radius;
  @include border_1px('default', $color, $radius * 2);
}